<template>
  <div style="width: 96%; margin-left: 2%;">
    <el-divider><i class="el-icon-finished"> 所有订单</i></el-divider>
    <el-card style="margin-top: 30px;" shadow="always">
      <el-table :data="orderInfoPage" height="450" border style="width: 100%"
        :default-sort="{prop: 'startDate', order: 'descending'}">
        <el-table-column fixed prop="flightNumber" label="航班号" width="200">
        </el-table-column>
        <el-table-column fixed prop="orderSerialNo" label="订单流水号" width="200">
        </el-table-column>
        <el-table-column prop="startCity" label="起飞城市" width="180">
        </el-table-column>
        <el-table-column prop="arriveCity" label="抵达城市" width="180">
        </el-table-column>
        <el-table-column prop="startDate" sortable label="起飞时间" width="180">
        </el-table-column>
        <el-table-column prop="arriveDate" sortable label="抵达时间" width="180">
        </el-table-column>
        <el-table-column prop="gds" label="航空公司" width="180">
        </el-table-column>
        <el-table-column prop="createTime" sortable label="创建时间" width="180">
        </el-table-column>
        <el-table-column prop="updateTime" sortable label="更新时间" width="180">
        </el-table-column>
        <el-table-column prop="price" sortable label="机票价格" width="180">
        </el-table-column>
        <el-table-column prop="ticketLevel" label="机票舱等" width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.ticketLevel == 0">商务舱</span>
            <span v-if="scope.row.ticketLevel == 1">一等舱</span>
            <span v-if="scope.row.ticketLevel == 2">二等舱</span>
            <span v-if="scope.row.ticketLevel == 3">三等舱</span>
            <span v-if="scope.row.ticketLevel == 4">四等舱</span>
          </template>
        </el-table-column>
        <el-table-column prop="seatNumber" label="座位类型" width="180">
        </el-table-column>
        <el-table-column prop="aircraftNumber" label="客机类型" width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.aircraftNumber == 0">大型客机</span>
            <span v-if="scope.row.aircraftNumber == 1">中型客机</span>
            <span v-if="scope.row.aircraftNumber == 2">小型客机</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <!-- // 判断是否购买-->
            <span v-if="scope.row.orderStatus == 0">
              <el-button type="text" size="mini">已取消</el-button>
            </span>
            <span v-if="scope.row.orderStatus == 1">
              <el-button type="text" size="mini">待支付</el-button>
            </span>
            <span v-if="scope.row.orderStatus == 3">
              <el-button type="text" size="mini">已支付</el-button>
            </span>
            <span>
              <el-button type="text" size="mini" @click="ticketDetail(scope.row)">订单详情</el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="margin-top: 20px; text-align: right;" background layout="sizes,prev, pager, next"
        :total="orderInfos.length" @size-change="sizeChange" :hide-on-single-page="true" @prev-click="prevClick"
        @next-click="nextClick" @current-change="currentChange">
      </el-pagination>
    </el-card>
    <el-divider><i class="el-icon-finished"> 订单详情</i></el-divider>
    <el-card style="margin-top: 30px; margin-bottom: 50px;" shadow="always">
      <div style="text-align: center;" v-if="!ticketRow.userId">
        未选择订单
      </div>
      <div style="text-align: left;" v-if="ticketRow.userId">
        <el-row :gutter="20" style="margin-top: 5px;">
          <el-col :span="24">订单号：{{ticketRow.orderSerialNo}}</el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 5px;">
          <el-col :span="8">姓名：{{ticketRow.reallyName}}({{ticketRow.nickName}})</el-col>
          <el-col :span="8">手机号：{{ticketRow.phoneNumber}}</el-col>
          <el-col :span="8">邮箱：{{ticketRow.emailAddress}}</el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 5px;">
          <el-col :span="8">身份证：{{ticketRow.idCardNumber}}</el-col>
          <el-col :span="8">航班号：{{ticketRow.flightNumber}}</el-col>
          <el-col :span="8">航空公司：{{ticketRow.gds}}</el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 5px;">
          <el-col :span="8">座位号：{{ticketRow.seatNumber}}</el-col>
          <el-col :span="8">抵达时间：{{ticketRow.arriveDate}}</el-col>
          <el-col :span="8">舱等：<span v-if="ticketRow.ticketLevel == 0">商务舱</span>
            <span v-if="ticketRow.ticketLevel == 1">一等舱</span>
            <span v-if="ticketRow.ticketLevel == 2">二等舱</span>
            <span v-if="ticketRow.ticketLevel == 3">三等舱</span>
            <span v-if="ticketRow.ticketLevel == 4">四等舱</span>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 5px;">
          <el-col :span="8">起抵城市：{{ticketRow.startCity}}({{ticketRow.startCityCode}}) ->
            {{ticketRow.arriveCity}}({{ticketRow.arriveCityCode}})</el-col>
          <el-col :span="8">起飞时间：{{ticketRow.startDate}}</el-col>
          <el-col :span="8">抵达时间：{{ticketRow.arriveDate}}</el-col>
        </el-row>
        <div v-if="!ticketRow.couponType">
          <el-row :gutter="20" style="margin-top: 5px;">
            <el-col :span="8">价格：{{ticketRow.price}} 元</el-col>
          </el-row>
        </div>
        <div v-if="ticketRow.couponType">
          <el-row :gutter="20" style="margin-top: 5px;">
            <el-col :span="8">价格：{{ticketRow.price - ticketRow.reduceMoney}} 元,其中优惠券抵扣 {{ticketRow.reduceMoney}} 元
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
  import axios from 'axios'
  export default {
    filters: {

    },
    data() {
      return {
        orderInfos: [],
        orderInfoPage: [],
        pageSize: 10,
        ticketRow: {}
      }
    },
    created() {},
    mounted() {
      this.searchOrderData()
    },
    methods: {
      ticketDetail(row) {
        this.ticketRow = {}
        this.ticketRow = row
      },
      // 前端分页
      prevClick(e) {
        this.orderInfoPage = this.orderInfos.slice((e - 1) * this.pageSize, e * this
          .pageSize)
      },
      nextClick(e) {
        this.orderInfoPage = this.orderInfos.slice((e - 1) * this.pageSize, e * this
          .pageSize)
      },
      currentChange(e) {
        this.orderInfoPage = this.orderInfos.slice((e - 1) * this.pageSize, e * this
          .pageSize)
      },
      sizeChange(e) {
        this.pageSize = e
        this.orderInfoPage = this.orderInfos.slice(0, this
          .pageSize)
      },
      searchOrderData() {
        let vm = this
        vm.orderInfoPage = []
        vm.orderInfos = []
        axios({
          method: 'get',
          url: process.env.BASE_API + '/order-service/order/queryManyRowByAdmin',
        }).then(function(res) {
          if (res.data.success) {
            vm.$message.success(res.data.message);
            vm.orderInfos = res.data.data.orderInfos
            vm.orderInfoPage = vm.orderInfos.slice(0, vm
              .pageSize)
          } else {
            vm.$message.warning(res.data.message);
          }
        })
      },
    }
  }
</script>
